<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="">
      </div>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme">
        <span class="datetime">{{nowTime}}</span>
      </div>
    </header>

    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <Trend ref="trend"></Trend>
          <div class="resize">
            <span @click="changeSize('trend')"
                  :class="['iconfont', fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <Seller ref="seller"></Seller>
          <div class="resize">
            <span @click="changeSize('seller')"
                  :class="['iconfont', fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
          <Map ref="map"></Map>
          <div class="resize">
            <span @click="changeSize('map')"
                  :class="['iconfont', fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="middle-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('rank')"
                  :class="['iconfont', fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <Hot ref="hot"></Hot>
          <div class="resize">
            <span @click="changeSize('hot')"
                  :class="['iconfont', fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="right-bottom" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <Stock ref="stock"></Stock>
          <div class="resize">
            <span @click="changeSize('stock')"
                  :class="['iconfont', fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
  import Hot from "@/views/Hot/Hot";
  import Map from "@/views/Map/Map";
  import Rank from "@/views/Rank/Rank";
  import Seller from "@/views/Seller/Seller";
  import Stock from "@/views/Stock/Stock";
  import Trend from "@/views/Trend/Trend";
  import {getThemeValue} from '@/utils/theme_utils'

  import {mapState} from 'vuex'

  export default {
    created() {
      // 注册接收到数据的回调函数
      setInterval(() => {
        this.getNow()
      }, 1000)
      this.$socket.registerCallback('fullScreen', this.recvData)
      this.$socket.registerCallback('themeChange', this.recvThemeChange)
    },
    destroyed() {
      this.$socket.unRegisterCallback('fullScreen')
      this.$socket.unRegisterCallback('themeChange')
    },
    data() {
      return {
        nowTime: '',
        fullScreenStatus: {
          trend: false,
          seller: false,
          map: false,
          rank: false,
          hot: false,
          stock: false
        }
      }
    },
    methods: {
      getNow() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hours = date.getHours()
        let minutes = date.getMinutes()
        let seconds = date.getSeconds()
        //返回格式化后的日期
        this.nowTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      },
      changeSize(chartName) {
        const targetValue = !this.fullScreenStatus[chartName]
        this.$socket.send({
          action: 'fullScreen',
          socketType: 'fullScreen',
          chartName: chartName,
          value: targetValue
        })
      },
      recvData(data) {
        const chartName = data.chartName
        this.fullScreenStatus[chartName] = data.value
        this.$nextTick(() => {
          this.$refs[chartName].screenAdapter()
        })
      },
      handleChangeTheme() {
        // 修改VueX中数据
        // this.$store.commit('changeTheme')
        this.$socket.send({
          action: 'themeChange',
          socketType: 'themeChange',
          chartName: '',
          value: ''
        })
      },
      recvThemeChange() {
        this.$store.commit('changeTheme')
      }
    },
    components: {
      Hot,
      Map,
      Rank,
      Seller,
      Stock,
      Trend
    },
    computed: {
      headerSrc() {
        return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
      },
      themeSrc() {
        return '/static/img/' + getThemeValue(this.theme).themeSrc
      },
      containerStyle() {
        return {
          backgroundColor: getThemeValue(this.theme).backgroundColor,
          color: getThemeValue(this.theme).titleColor
        }
      },
      ...mapState(['theme'])
    }
  }
</script>

<style lang="less" scoped>
  // 全屏样式的定义
  .fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 100;
  }

  .screen-container {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    background-color: #161522;
    color: #fff;
    box-sizing: border-box;
  }

  .screen-header {
    width: 100%;
    height: 64px;
    font-size: 20px;
    position: relative;

    > div {
      img {
        width: 100%;
      }
    }

    .title {
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }

    .title-right {
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-80%);
    }

    .qiehuan {
      width: 28px;
      height: 21px;
      cursor: pointer;
    }

    .datetime {
      font-size: 15px;
      margin-left: 10px;
    }

    .logo {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-80%);

      img {
        height: 35px;
        width: 128px;
      }
    }
  }

  .screen-body {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 10px;

    .screen-left {
      height: 100%;
      width: 27.6%;

      #left-top {
        height: 53%;
        position: relative;
      }

      #left-bottom {
        height: 31%;
        margin-top: 25px;
        position: relative;
      }
    }

    .screen-middle {
      height: 100%;
      width: 41.5%;
      margin-left: 1.6%;
      margin-right: 1.6%;

      #middle-top {
        width: 100%;
        height: 56%;
        position: relative;
      }

      #middle-bottom {
        margin-top: 25px;
        width: 100%;
        height: 28%;
        position: relative;
      }
    }

    .screen-right {
      height: 100%;
      width: 27.6%;

      #right-top {
        height: 46%;
        position: relative;
      }

      #right-bottom {
        height: 38%;
        margin-top: 25px;
        position: relative;
      }
    }
  }

  .resize {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
  }
</style>